<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊人群</title>
    <style>


        .main_left{
            width: 150px;
            height: 100%;
            float:left;
            background:#c0c0c0;
            cursor:pointer;
        }
        .main_right{
            height: 800px;
        }


    </style>


</head>
<body class="bbb">
    <div class="iframe">
        <div class="main_left" style="height: 100%">
            <ul>
                <li data-src="index1.html">艾滋</li>
                <li data-src="index2.html">精神病</li>
                <li data-src="index3.html">特殊儿童</li>
                <li data-src="index4.html">刑满释放</li>
                <li data-src="index5.html">社区矫正</li>
            </ul>
        </div>

        <div class="main_right">

            <iframe frameborder="0" scrolling="yes" style="width: 80%;height: 100%;"  src="index1.html" id="aa"></iframe>
        </div>
    </div>

</body>


<script type="text/javascript">
    let items = document.getElementsByTagName("li");
    for(let i=0; i<items.length; i++) {
        items[i].onclick = function (){
            let src = items[i].getAttribute("data-src")
            document.getElementById("aa").setAttribute("src", src)
        }
    }

</script>

</html>